/**
 * SpaceIcon 组件
 *
 * 用于统一渲染空间图标的组件，支持：
 * - 动态图标尺寸
 * - 自定义样式类名
 * - 图标不存在时的降级处理
 * - TypeScript类型安全
 *
 * @example
 * ```tsx
 * // 基础用法
 * <SpaceIcon iconId="folder" />
 *
 * // 自定义尺寸和样式
 * <SpaceIcon
 *   iconId="code"
 *   size={20}
 *   className="text-blue-500 hover:text-blue-700"
 * />
 * ```
 */

import React from 'react';
import { Folder } from 'lucide-react';
import { getSpaceIconById } from '@/lib/spaceIcons';
import { cn } from '@/lib/utils';

// SpaceIcon 组件 Props 接口
interface SpaceIconProps {
    // 图标ID（对应 spaceIcons.ts 中的图标标识）
    iconId: string;
    // 图标尺寸（像素值）
    size?: number;
    // 自定义CSS类名
    className?: string;
    // 图标颜色（CSS color值）
    color?: string;
    // 是否禁用状态
    disabled?: boolean;
}

/**
 * SpaceIcon 组件实现
 *
 * 功能：
 * 1. 根据iconId动态渲染对应的Lucide图标
 * 2. 支持尺寸、颜色、样式自定义
 * 3. 图标不存在时显示默认文件夹图标
 * 4. 集成禁用状态样式
 */
const SpaceIconComponent: React.FC<SpaceIconProps> = ({
    iconId,
    size = 16,
    className = '',
    color,
    disabled = false
}) => {
    // 根据图标ID获取对应的图标项
    const iconItem = getSpaceIconById(iconId);

    // 确定要渲染的图标组件（降级到默认图标）
    const IconComponent = iconItem?.component || Folder;

    // 组合样式类名
    const iconClassName = cn(
        'flex-shrink-0', // 防止图标被压缩
        disabled && 'opacity-50 cursor-not-allowed', // 禁用状态样式
        className
    );

    // 构建图标属性
    const iconProps = {
        size,
        className: iconClassName,
        ...(color && { color }), // 仅在指定颜色时添加color属性
        'aria-hidden': true, // 图标装饰性质，对屏幕阅读器隐藏
    };

    return <IconComponent {...iconProps} />;
};

// 使用 React.memo 优化 SpaceIcon 性能，避免不必要的重渲染
// SpaceIcon 是纯展示组件，相同 props 应该产生相同输出
export const SpaceIcon = SpaceIconComponent;
